<template>
    <!-- ref用于引用这个卡片 -->
    <v-card ref="cardRef" v-if="props.videoInfo" hover ripple :elevation="0" rounded="lg">
        <!-- 图片展示视频封面 -->
        <v-img :src="props.videoInfo.cover ? apiFileGet(props.videoInfo.cover) : '/not-found.png'" class="align-end"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" height="250px" cover>
            <!-- 作者头像  -->
            <!-- <v-avatar :image="props.videoInfo.user.avatar ? apiFileGet(props.videoInfo.user.avatar) : '/logo.png'"
                style="position:absolute;top:10px;right:10px">
            </v-avatar> -->
            <!-- 卡片文本部分，显示点赞数和时长 -->
            <v-card-text class="text-white pa-0" v-if="!overlay">
                <!-- 选项行 -->
                <v-card-actions class="ml-1 mr-1 pa-0">
                    <!-- 显示点赞数 -->
                    <span class="ma-2 font-weight-bold" text-color="white" prepend-icon="mdi-heart">
                        <v-icon>mdi-heart</v-icon>
                        {{ props.videoInfo.thumbCount }} 点赞
                    </span>
                    <v-spacer />
                    <!-- 视频时长按钮，显示视频时长和导航到视频详情 -->
                    <v-btn :variant="'tonal'" :density="'comfortable'">{{ props.videoInfo.duration }}</v-btn>
                </v-card-actions>
            </v-card-text>
        </v-img>
        <!-- 图片下面的选项行 -->
        <v-card-actions>
            <!-- 视频标题 -->
            <span style="max-height: 20px;color: white;" class="ml-1 overflow-hidden">{{ props.videoInfo.title }}</span>
            <v-spacer></v-spacer>
            <!-- 作者按钮，显示作者和导航到作者主页，通过查询参数传参配合重定向跳转对应作者主页 -->
            <v-btn size="small" color="white" variant="tonal" v-if="props.videoInfo.user" @click.stop
                :to="userStore.token ? `/user?lookId=${props.videoInfo.user.id}` : ''">@{{ props.videoInfo.user.nickName
                }}
            </v-btn>
        </v-card-actions>
        <!-- 播放中覆盖层 -->
        <v-overlay scrim="black" :model-value="overlay" contained persistent width="100%" style="top:0px">
            <v-card color="rgba(1,1,1,0.5)" height="350px">
                <v-card-title class="pb-0">播放中</v-card-title>
                <!-- 显示视频标签 -->
                <v-chip-group class="ml-2 mr-2">
                    <v-chip v-for="item in props.videoInfo.labelNames.split(',')" draggable>{{ item }}</v-chip>
                </v-chip-group>
                <!-- 展示视频的播放量、点赞数和收藏数的信息 -->
                <v-card-subtitle>
                    <v-row>
                        <v-col>
                            {{ props.videoInfo.historyCount }} 播放
                        </v-col>
                        <v-col>
                            {{ props.videoInfo.thumbCount }} 点赞
                        </v-col>
                        <v-col>
                            {{ props.videoInfo.favoritesCount || 0 }} 收藏
                        </v-col>
                    </v-row>
                </v-card-subtitle>
                <!-- 选项行，展示视频号和复制视频地址 -->
                <v-card-actions class="pb-0 pt-0">
                    <v-chip variant="plain" :density="'compact'" @click="copyUrl()" draggable>视频YV号: {{
                        props.videoInfo.yv
                        }}</v-chip>
                    <v-chip color="orange-lighten-2" variant="text" draggable>
                        描述
                    </v-chip>
                    <v-spacer></v-spacer>
                </v-card-actions>
                <!-- 转场动画扩展过渡用于扩展面板和列表组，显示视频描述 -->
                <v-expand-transition>
                    <div v-show="showDescription">
                        <v-divider></v-divider>
                        <v-card-text>
                            {{ props.videoInfo.description || "作者很懒，没有给一点描述" }}
                        </v-card-text>
                    </div>
                </v-expand-transition>
            </v-card>
        </v-overlay>
        <!-- 用户操作提示消息 -->
        <v-snackbar v-model="snackbar.show" :color="snackbar.color">
            {{ snackbar.text }}

            <template v-slot:actions>
                <v-btn color="blue" variant="text" @click="snackbar.show = false">
                    了解
                </v-btn>
            </template>
        </v-snackbar>
    </v-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { apiFileGet } from '../../apis/file';
import { useUserStore } from '../../stores';
import strUtils from '../../utils/strUtil';
// 显示说明标志
const showDescription = ref(false)
// 全局的用户数据
const userStore = useUserStore()
// 接收父组件传入的数据
const props = defineProps({
    // 视频信息
    videoInfo: {
        type: Object,
        default: null
    },
    // 遮罩层开关标志
    overlay: {
        type: Boolean,
        default: false
    }
})
// 提示框信息
const snackbar = ref({
    show: false,
    text: ""
})

// 视频YV号复制操作函数
const copyUrl = () => {
    // 赋值提示框信息
    snackbar.value = {
        // 调用工具类中的复制文本内容函数并更加返回值进行文本赋值
        text: strUtils.copyContent(props.videoInfo.yv) ? "视频YV号复制成功" : "视频YV号复制失败",
        show: true
    }

}
// 卡片的引用
const cardRef = ref()
onMounted(() => {
    // 根据遮罩层是否开启决定说明的显示
    showDescription.value = props.overlay
})
// 监听 props.overlay 的变化
watch(() => props.overlay, (e) => {
    // 根据变化修改显示说明标志的值
    showDescription.value = e
    if (e) {
        // 获取引用的卡片，将卡片平滑滚动到视图中央
        cardRef.value.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }
})
</script>
